import React, { Component, Fragment } from "react";
// antd
import { Col, Image, Row, Card, Avatar, Collapse, Button, Typography, Modal, Tag, Divider } from "antd";
import Action from "@c/buttonAction/Index";
// http
import http from '../../../utils/request';
const { Panel } = Collapse;
const { Meta } = Card;
const { Link } = Typography;
const DemoBox = (props) => <p className={`height-${props.value}`}>{props.children}</p>;


class MiddlewareTreeManage extends Component {
    constructor(props){
        super(props);
        this.state = {
            // 表格分页
            total: '',
            page: 1,
            page_number: 10,
            dataSource: [],
            columns: [
                {title: "名称", dataIndex: "name", key: "name"},
                {title: "代码", dataIndex: "code", key: "code"},
                {title: "图标", dataIndex: "logo", key: "logo"},
                {title: "预览", dataIndex: "logo", key: "logo",
                    render: (text,rowData) => {
                        return (
                            <Image
                                width={30}
                                src={rowData.logo}
                            />
                        )
                    }
                },
                {title: "操作", dataIndex: "operation", key: "operation", 
                    render: (text, rowData) => {
                        return (
                            <div className="inline-button">
                                <Action>
                                    <Action.Button onClick={() => this.onEditMiddlewareTypeBtn({rowData: rowData, status: true})}>编辑</Action.Button>
                                    <Action.Button onClick={() => this.onDeleteMiddlewareTypeBtn(rowData)}>删除</Action.Button>
                                </Action>
                            </div>

                        )
                    }           
                }
            ],
            loading: false,
            search_middleware_type_name: null,
            search_middleware_type_code: null,
            visible_add: false,     // 添加
            visible_edit: false,    // 编辑
            visible_delete: false,  // 删除
            middleware_type_id: '',
            middleware_type_name: '',
            visible_edit_id: '',
            visible_edit_name: '',
            visable_edit_code: '',
            visible_middleware: false,
            middleware_address: '',
            middleware_remark: '',
            middleware_domain: '',
            middleware_name: '',

            tree_data: [],

        }
        this.formRefAdd = React.createRef();
        this.formRefEdit = React.createRef();
        this.formRefMsg = React.createRef();
    }

    componentDidMount() {
        this.loadData()
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'name__contains': this.state.search_middleware_type_name,
            'code__contains': this.state.search_middleware_type_code,
        }

        // 获取分组列表
        http.get('/middlewareTree', {params: requestData}).then(response=>{
            this.setState({
                tree_data: response.data.data,
                loading: false
            })
        }).catch()
    }

    onDisplayDetailBtn = (el) => {
        // console.log(111111, el)
        // this.statevisible_middleware_detail = el.address
        // console.log(el.address.split('\n'))
        // const xxx = el.address.split('\n')
        // console.log(xxx)
        console.log(el)
        const middleware_address = el.address ? el.address.split("\n").map(index => (
            <div>{index}</div>
        )) : ''
        const middleware_remark = el.remark ? el.remark.split("\n").map(index => (
            <div>{index}</div>
        )) : ''


        this.setState({
            middleware_name: el.name,
            middleware_domain: el.key,
            middleware_address: middleware_address,
            middleware_remark: middleware_remark,
            visible_middleware: true,
        })
    }


    render(){
        const { tree_data, visible_middleware, middleware_address, middleware_remark, middleware_name, middleware_domain } = this.state
        var bbb = { marginTop: "15px", marginLeft: "48px", color: "#989898"}
        var ddd = { marginTop: "10px", marginBottom: "10px"}
        return (
            <Fragment>
                <Collapse ghost>
                    { 
                        (tree_data.map((item, index) =>   
                            <Panel header={item.title} key={index}>
                                <Row>
                                    {
                                        item.children.map(el=>(
                                            <Col span={8}>
                                                <DemoBox value={100}>
                                                    <Card style={{ width: '100%', marginTop: 2, height: "150px" }}>
                                                        <Meta
                                                            avatar={<Avatar src={el.logo} />}
                                                            // title={el.title}
                                                            description={el.title}
                                                        />

                                                        <div style={bbb}>                                                
                                                            <Link target="_blank" href={el.key}>
                                                                {el.key}
                                                            </Link>
                                                        </div>

                                                        {/* <div style={bbb}>
                                                            {
                                                                el.address.split('\n').map(x=>(
                                                                    <div>{x}</div>
                                                                ))
                                                            }
                                                        </div> */}

                                                        <div style={bbb}>
                                                            <Button size="small" onClick={() => this.onDisplayDetailBtn(el)}>
                                                                详情
                                                            </Button>
                                                        </div>
                                                    </Card>
                                                </DemoBox>
                                            </Col>
                                        ))
                                    }
                                </Row>
                            </Panel>
                        ))
                    }
                </Collapse>    

                <Modal
                    title="同步资源"
                    visible={visible_middleware}
                    onCancel={() => this.setState({'visible_middleware': false})}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                    width="600px"
                >
                    <div style={ddd}><Tag color="green">名称</Tag></div> {middleware_name}
                    <Divider />
                    <div style={ddd}><Tag color="green">域名</Tag></div> {middleware_domain}
                    <Divider />
                    <div style={ddd}><Tag color="green">地址</Tag></div> {middleware_address}
                    <Divider />
                    <div style={ddd}><Tag color="green">备注</Tag></div> {middleware_remark}
                    
                </Modal>
            </Fragment>
        )
    }
}
export default MiddlewareTreeManage;